/**
 * @file EditModal.tsx
 * @author zhaoli
 */

import * as React from 'react';
import { inject, observer } from "mobx-react";
import { Modal, Input, Form, Select, Icon, TreeSelect } from 'antd';
import * as Lodash from 'lodash';
import { AppStore} from '../../../store';
import './editModal.less'

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

interface IProps {
  appStore?: AppStore;
  form: any,
  visible: boolean,
  onCancel?(): any,
  onCreate?(values: any): any,
  editconfig: any,
  title: string,
  isNew: boolean,
  values: any,
  cancelText?: string,
  okText?: string,
}

@inject("appStore")
@observer
class EditModal extends React.Component<IProps> {

  onCreate = ()=> {
    this.props.form.validateFields((err: any, values: any) => {
      if (err) {
        return;
      }
      this.props.onCreate(values)
      this.props.form.resetFields();
      this.props.appStore.showEditModal(false)
    });
  }

  onCancel = () => {
    this.props.form.resetFields();
    this.props.onCancel()
    this.props.appStore.showEditModal(false)
  }

  render() {
    const { visible, editconfig, title, isNew, values, cancelText, okText, } = this.props;
    const { editModalVisible, showEditModal } = this.props.appStore
    const { getFieldDecorator } = this.props.form;

    return (
      <Modal
        title={title}
        visible={visible}
        onOk={this.onCreate}
        onCancel={this.onCancel}
        cancelText={cancelText || '取消'}
        okText={ okText || '确认'}
      >
        <Form layout="vertical" className="editModal">
          {
            !isNew && <FormItem label='ID' key='id'>
              {getFieldDecorator('id', {
                initialValue: values.id
              })(
                <Input disabled />
              )}
            </FormItem>
          }
          {
            Lodash.map(editconfig, (item, index) => {
              if(item.type === "input") {
                return <FormItem label={item.name} key={index}>
                  {getFieldDecorator(item.key, {
                    initialValue: values[item.key],
                    rules: [{ required: item.rule.required, message: item.rule.message }],
                  })(
                    <Input
                      disabled={item.disabled}
                      placeholder={isNew ? `请输入${item.name}` : values[item.key]}
                    />
                  )}
                </FormItem>
              }
              if(item.type === "textArea") {
                return <FormItem label={item.name} key={index}>
                  {getFieldDecorator(item.key, {
                    initialValue: values[item.key],
                    rules: [{ required: item.rule.required, message: item.rule.message }],
                  })(
                    <TextArea
                      rows={5}
                      disabled={item.disabled}
                      placeholder={isNew ? `请输入${item.name}` : values[item.key]}
                    />
                  )}
                </FormItem>
              }
              else if(item.type === "select_multi") {
                return <FormItem label={item.name} key={index}>
                  {getFieldDecorator(item.key, {
                    initialValue: values[item.key] || item.placeholder,
                    // rules: [{ required: item.rule.required, message: item.rule.message }],
                  })(
                    item.options
                    && <Select
                      showSearch
                      mode="multiple"
                      placeholder="请选择"
                      optionFilterProp="children"
                      // onChange={(value) => {console.log(value)}}
                      disabled={item.disabled}
                    >
                      {item.options.map((ele: any, i: string) => (
                        <Option value={ele.id} key={i}>{ele.name}</Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              }
              else if(item.type === "select_tree") {
                return <FormItem label={item.name} key={index}>
                  {getFieldDecorator(item.key, {
                    initialValue: values[item.key] || item.placeholder,
                    // rules: [{ required: item.rule.required, message: item.rule.message }],
                  })(
                    item.options
                    && <TreeSelect
                      treeData={item.options}
                      treeCheckStrictly={true}
                      // onChange={(value) => {console.log('onChange ', value)}}
                      treeCheckable={true}
                      showCheckedStrategy={'SHOW_ALL'}
                      searchPlaceholder= '请选择'
                    />
                  )}
                </FormItem>
              }
              else if(item.type === "select_one") {
                return <FormItem label={item.name} key={index}>
                  {getFieldDecorator(item.key, {
                    initialValue: values[item.key] || item.placeholder,
                    // rules: [{ required: item.rule.required, message: item.rule.message }],
                  })(
                    item.options
                    && <Select
                      showSearch
                      placeholder="请选择"
                      optionFilterProp="children"
                      // onChange={(value) => {console.log(value)}}
                    >
                      {item.options.map((ele: any, i: string) => (
                        <Option value={ele.id} key={i}>{ele.name}</Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              }
            })
          }
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(EditModal);
